﻿/* *** Estilos globales (start) *** */
strong {
	font-weight: bold;
}
.clearfix {
	clear: both;
}
.centrado {
	text-align: center !important;
}
.degradadoGris {
	background-image: linear-gradient(right , #EFF6F0 9%, #E0E0E0 69%);
	background-image: -o-linear-gradient(right , #EFF6F0 9%, #E0E0E0 69%);
	background-image: -moz-linear-gradient(right , #EFF6F0 9%, #E0E0E0 69%);
	background-image: -webkit-linear-gradient(right , #EFF6F0 9%, #E0E0E0 69%);
	background-image: -ms-linear-gradient(right , #EFF6F0 9%, #E0E0E0 69%);

	background-image: -webkit-gradient(
		linear,
		right top,
		left top,
		color-stop(0.09, #EFF6F0),
		color-stop(0.69, #E0E0E0)
	);
}
.fondoVerde {
	background-color:#EFF6F0; 
}
/* *** Estilos globales (end) *** */


#factura {
	width: 920px;
	border: 1px solid #000;
	margin: 15px 0 15px 20px;
	padding: 15px 0 0 0;
	float: left;
}
	#cuerpoColIzq {
		width: 665px;
		float:left;
	}


/* *** Cabezote (start) *** */
#header {
	margin-bottom: 20px;
}

#logoAcueducto {
	float: left;
	width: 198px;
	margin:0 0 0 10px;
}

#headerColCentro {
	float: left;
	width: 435px;
	
}
	#headerColCentro #conTitPagina {
	text-align: center;
	color: #0099cc;
	font-size: 13px;
	font-weight: bold;
	}
		#conTitPagina h1 {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 5px;
		}
		
	#headerColCentro #numFactura {
		height: 45px;
		margin-top: 15px;
		padding: 3px 0;
	}
		#numFactura .etiqueta {
	width: 210px;
	float: left;
	text-align: center;
	color: #0099cc;
	font-size: 14px;
	font-weight: bold;
			
		}
			#numFactura .etiqueta .letraPeq {
				font-size: 10px;
			}
		#numFactura .valor {
			width: 210px;
			float: right;
			text-align:center;
			line-height: 40px;
			font-size: 26px;
			font-weight:bold;
		}

#headerColDer {
	width: 265px;
	float: right;
	
}
	#headerColDer .ValorPago, #headerColDer .Vencimiento {
		height: 60px;
		text-align:center;
	}
		#headerColDer .ValorPago strong, #headerColDer .Vencimiento strong {
	display: block;
	color: #0099cc;
	font-size: 20px;
	margin-top: 15px;
	padding-bottom: 2px;
		}
		#headerColDer .ValorPago span, #headerColDer .Vencimiento span {
			display: block;
			font-size: 20px;
			font-weight:bold;
		}

#headerFilaInf {
	width: 708px;
	float: right;
	margin-top: 5px;
}
	#headerFilaInf .matricula {
		float: left;
		width: 280px;
		
		height: 36px;
		line-height: 36px;
	}
		#headerFilaInf .matricula strong {
	display: inline-block;
	width: 140px;
	color: #0099cc;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
			
		}
		#headerFilaInf .matricula span {
			display:inline-block;
			width: 130px;
			font-size: 18px;
			font-weight: bold;
			text-align:center;
			
		}
	#headerFilaInf .fechaExpedicion, #headerFilaInf .fechaSuspension {
		float: right;
		width: 210px;
		
		text-align:center;
		font-weight: bold;
		font-size: 17px;
		padding-top: 3px;
	}
		#headerFilaInf .fechaExpedicion strong, #headerFilaInf .fechaSuspension strong {
			display:block;
			padding-bottom: 2px;
			font-weight: normal;
			font-size: 13px;
		}
/* *** Cabezote (end) *** */



/* *** Datos del usuario (start) *** */
#datosUsuario {
	width: 590px;
	margin-bottom: 10px;
	float:left;
}
	#datosUsuario td {
		padding: 5px;
		font-size: 16px;
		font-weight: bold;
		vertical-align: middle;
		
	}
		#datosUsuario td strong {
			display:inline-block;
			font-size: 15px;
			font-weight: normal;
			padding-right: 16px;
		}

/* *** Datos del usuario (end) *** */


/* *** Datos de medición (start) *** */
#datosMedicion {
	width: 590px;
	float:left;
	margin-bottom: 15px;
}
	#datosMedicion table {
		width: 100%;
	}
	#datosMedicion td {
		border: 1px solid #000000;
		font-size: 14px;
		padding: 3px 6px;
		vertical-align: middle;
	}
	#datosMedicion strong {
		font-size: 13px;
		font-style:italic;
	}
	#datosMedicion h2.titulo {
	padding: 4px 8px;
	font-weight: bold;
	font-size: 17px;
	color: #0099cc;
	}
	
	#datosMedicion .periodoFacturado {
		width: 280px;
	}
		#datosMedicion .periodoFacturado strong.subtitulo {
			display: block;
			font-style:normal;
			text-align:center;
			padding-bottom: 4px;
			font-size: 12px;
		}
		#datosMedicion .periodoFacturado div.fechaDesde, #datosMedicion .periodoFacturado div.fechaHasta {
			float:left;
			width: 145px;
			text-align:center;
		}
		#datosMedicion .periodoFacturado div.fechaDesde {
			border-right: 1px solid #000;
		}
		
		#datosMedicion .factVencidas, #datosMedicion .IntMora {
			text-align:center;
		}
		#datosMedicion .factVencidas strong, #datosMedicion .IntMora strong  {
			display:block;
			padding-bottom: 3px;
		}
		#datosMedicion .lecturaAnterior, #datosMedicion .lecturaActual, #datosMedicion .consumo, #datosMedicion .causal, #datosMedicion .cobro, #datosMedicion .medidor {
			padding: 6px 6px;
		}
/* *** Datos de medición (end) *** */


/* *** Comparativo de consumos (start) *** */
#comparativoConsumos {
	float:right;
	width: 320px;
	font-size: 10px;
}
	#comparativoConsumos h2.titulo {
	padding: 4px 8px;
	font-weight: bold;
	font-size: 17px;
	margin-bottom: 5px;
	color: #0099cc;
	}
	#comparativoConsumos table {
	width: 100%;
	}
		#comparativoConsumos table td {
		}
			#comparativoConsumos table td div { 
				position: relative;
				width: 43px;
				height: 205px;
			}
			#comparativoConsumos .medida, #comparativoConsumos .costo,
			#comparativoConsumos .fecha, #comparativoConsumos .barra {
				position: absolute;
				width: 40px;
				text-align: center;
				left: 0;
				height: auto;
			}
			#comparativoConsumos .medida { top: 0; }
			#comparativoConsumos .costo { bottom: 0; }
			#comparativoConsumos .fecha { bottom: 12px; }
			#comparativoConsumos .barra {
				border: 1px solid;
				background-color: #EEE;
				bottom: 30px;
			}
/* *** Comparativo de consumos (end) *** */


/* *** Liquidación de servicios (start) *** */
#liquidacionServicios {
	margin-bottom: 15px;
}
	#liquidacionServicios h2.titulo {
	padding: 4px 8px;
	font-weight: bold;
	font-size: 17px;
	text-align: center;
	color: #0099cc;
		
	}
	#liquidacionServicios table {
		width: 100%;
	}
		#liquidacionServicios tr.first td { border-top: 1px solid #000; }
		#liquidacionServicios tr.last td { border-bottom: 1px solid #000; }
		
		#liquidacionServicios table th {
			text-align:center;
			font-size: 9px;
			padding-top: 8px;
			padding-bottom: 3px;
		}
		#liquidacionServicios table td {
			text-align:right;
			border-left: 1px solid #000;
			border-right: 1px solid #000;
			padding: 3px 5px;
			font-size: 12px;
		}
		#liquidacionServicios table td.etiqueta {
			font-size: 11px;
			text-align:left;
			padding: 3px 1px 0 6px;
			width: 125px;
		}
		#liquidacionServicios td.subtitulo {
			border-left: none;
			border-right:none;
			padding: 3px 0 0 0;
		}
			#liquidacionServicios td.subtitulo h3 {
	padding: 1px 6px;
	font-weight: bold;
	font-size: 13px;
	text-align: left;
	padding: 2px 8px;
	color: #0099cc;
			}
		
/* *** Liquidación de servicios (end) *** */


/* *** Conceptos de facturación (start) *** */
#conceptosFacturacion {
	
}
	#conceptosFacturacion h2.titulo {
	padding: 4px 8px;
	font-weight: bold;
	font-size: 17px;
	text-align: left;
	margin-bottom: 2px;
	color: #0099cc;
	}
	
	#conceptosFacturacion .marcoConceptos {
		border: 1px solid #000;
		padding: 10px 0 0 10px;
	}
	
	#conceptosFacturacion table {
	width: 310px;
	}
	#conceptosFacturacion table.colIzq { float: left; }
	#conceptosFacturacion table.colDer { float: right; }
		
		#conceptosFacturacion table td {
			height: 20px;
			font-size: 13px;
			padding: 1px 20px 2px 1px;
			text-align:right;
		}
		#conceptosFacturacion table td.etiqueta {
			width: 200px;
			text-align:left;
		}
	
	#conceptosFacturacion strong.total {
		display: block;
		float: right;
		font-size: 22px;
		padding: 5px 25px 5px 15px;
		margin-top: 3px;
	}
		#conceptosFacturacion strong.total .etiqueta {
	display: inline-block;
	padding-right: 35px;
	font-size: 16px;
	color: #0099cc;
		}
		
	#conceptosFacturacion .fechaUltimoPago, #conceptosFacturacion .valorUltimoPago {
		width: 330px;
		margin-top: 10px;
	}
	#conceptosFacturacion .fechaUltimoPago {
		float: left;
	}
	#conceptosFacturacion .valorUltimoPago {
		float: right;
	}
		#conceptosFacturacion .fechaUltimoPago strong, #conceptosFacturacion .valorUltimoPago strong {
	display: inline-block;
	padding-right: 35px;
	font-size: 14px;
	color: #0099cc;
	margin-left: 5px;
			
		}
/* *** Conceptos de facturación (end) *** */


/* *** Servicio de aseo (start) *** */
#servicioAseo {
	width: 240px;
	border: 1px solid #000;
	float: right;
	margin-bottom: 10px;
	margin-right: 5px;
}
	#servicioAseo h2.titulo {
	padding: 4px;
	font-weight: bold;
	font-size: 16px;
	text-align: left;
	margin-bottom: 20px;
	color: #0099cc;
	}
	
	#servicioAseo table {
		width: 100%;
	}
		#servicioAseo table td {
			font-size: 11px;
			padding: 4px;
		}
	
	#servicioAseo .total {
		font-size: 18px;
		font-weight:bold;
		padding: 4px 2px;
		margin-top: 10px;
	}
		#servicioAseo .total strong {
	display: inline-block;
	padding-right: 15px;
	font-size: 12px;
	color: #0099cc;
			
		}
	
/* *** Servicio de aseo (end) *** */


/* *** Mensaje (inicio) *** */
#mensaje {
	float: right;
	width: 240px;
	margin-right: 5px;
}
	#mensaje .titulo {
	display: block;
	font-size: 16px;
	font-weight: bold;
	height: 20px;
	padding: 2px 0 0 5px;
	color: #0099cc;
	}
	#mensaje .contenido {
		border: 1px solid #000000;
		margin-top: 2px;
		font-size: 14px;
	}
		#mensaje .contenido p {
			margin: 15px 10px 14px 12px;
			text-align: center;
		}
		#mensaje .contenido .pagWeb {
			display: block;
			margin-top: -16px;
			text-align: center;
		}
		#mensaje .contenido .barInfMensaje {
		}
		#mensaje .contenido .barInfMensaje .saldoFinanciacion {
	font-size: 12px;
	line-height: 30px;
	margin: 0 40px 0 5px;
	color: #0099cc;
		}
/* *** Mensaje (end) *** */


/* *** Footer (inicio) *** */
#footer {
	font-size: 15px;
	height: 205px;
	text-align: center;
	margin-top: 10px;
	border-top: 2px dotted #000;
	padding-top: 15px;
}
	#datosResumen {
		float: left;
		height: 100%;
		width: 495px;
	}
		#datosResumen strong {
	width: 100%;
	margin-bottom: 2px;
		}
		#datosResumen .normalDatos {
			float: left;
			height: 50px;
			width: 140px;
		}
			#datosResumen .normalDatos strong {
	display: block;
	font-size: 12px;
	color: #0099cc;
				
			}
		#datosResumen .periodoFacturado {
			width: 215px;
		}
			#datosResumen .periodoFacturado ul li {
				float: left;
				width: 50%;
			}
			
		#datosResumen .cicloInteres {
	height: 120px;
	width: 500px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
		}
			#datosResumen .cicloInteres .normal {
	float: left;
	height: 150px;
			}
			#datosResumen .cicloInteres .ciclo {
	width: 200px;
			}
			#datosResumen .cicloInteres .interesHasta {
	width: 300px;
			}
			#datosResumen .cicloInteres strong {
	display: block;
	margin: 15px 5px 5px 5px;
	color: #0099cc;
			}
			
			#datosResumen .codigoBar {
				margin: 5px auto 0px auto;
			}
	
	#encuestaFooter {
		border: 1px solid #000000;
		float: left;
		font-size: 14px;
		font-weight: bold;
		height: 180px;
		width: 260px;
	}
		#encuestaFooter .titulo {
			display: block;
			border-bottom: 1px solid #000000;
			font-size: 18px;
			height: 30px;
			line-height: 30px;
			margin-bottom: 10px;
			width: 100%;
		}
		#encuestaFooter p {
			padding: 0 15px;
			font-size: 12px;
			line-height: 15px;
		}
		
		#encuestaFooter div.leyenda {
			display: block;
			font-size: 12px;
			margin-top: 15px;
			margin-bottom: 5px;
			width: 100%
		}
		#encuestaFooter form ul li {
			float: left;
			padding-left: 15px;
			text-align: left;
			width: 44%;
		}
	
	#totalFactura {
	float: left;
	width: 400px;
	padding-top: 20px;
	}
		#totalFactura .valorPago, #totalFactura .numeroFactura {
			height: 85px;
			color: #000000;
			font-size: 22px;
			font-weight: bold;
			height: 80px;
			width: 100%;
		}
			#totalFactura strong {
	display: block;
	color: #0099cc;
	font-size: 16px;
	width: 100%;
	padding-bottom: 10px;
			}
			#totalFactura .valorPago strong {
	font-size: 20px;
				
			}
			#totalFactura .numeroFactura strong {
	font-size: 20px;

			}
/* *** Footer (end) *** */
